<template>
  <div class="mainWrapper">
    <div class="top">
      <img
        class="avatar"
        v-if="commentData.user.head_img"
        :src="$axios.defaults.baseURL + commentData.user.head_img"
        alt=""
      />
      <img class="avatar" v-else src="@/assets/logo.png" alt="" />
      <div class="info">
        <div class="name">{{ commentData.user.nickname }}</div>
        <div class="date">2小时前</div>
      </div>
      <div class="btnReply" @click="replyMain">回复</div>
    </div>
    <div class="mainContent">
      {{ commentData.content }}
      <comment-parent
        v-if="commentData.parent"
        :commentParent="commentData.parent"
      />
    </div>
  </div>
</template>

<script>
import eventBus from "../../utils/index";
import CommentParent from "./parent";
export default {
  name: "CommentMain",
  components: {
    CommentParent,
  },
  props: {
    commentData: Object,
  },
  data() {
    return {};
  },
  methods: {
    replyMain() {
      eventBus.$emit("clickReply", this.commentData.id);
    },
  },
};
</script>

<style scoped lang="less">
.mainWrapper {
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #888;
}
.top {
  display: flex;
  padding-bottom: 14/360 * 100vw;
  .avatar {
    width: 36/360 * 100vw;
    height: 36/360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
  .info {
    flex: 1;
    padding-left: 10/360 * 100vw;
    .name {
      font-size: 16/360 * 100vw;
      color: #333;
    }
    .date {
      font-size: 12/360 * 100vw;
      color: #888;
    }
  }
  .btnReply {
    font-size: 14/360 * 100vw;
    color: #888;
  }
}

.mainContent {
  font-size: 16/360 * 100vw;
  color: #333;
}
</style>
